<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!--引入 element-ui 的样式，-->
		<link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
		<!-- 必须先引入vue，  后使用element-ui -->
		<script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
		<!-- 引入element 的组件库-->
		<script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

		<script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

		<script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>

		<link rel="stylesheet" href="/admin/js-css/css/pageLR.css">
		<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">
		<link rel="icon" href="img/logo.png">
		<title>系统登录</title>
		<style>
			.grids {
				border-radius: 8px;
				padding: 12px 20px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				color: #fff;
			}

			.grids .font26 {
				font-size: 26px;
			}
			.grids .font14 {
				font-size: 14px;
				margin-top: 6px;
			}

			.grids .martop {
				margin-top: 0;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
			}
		</style>
	</head>


	<body>
		<div id="app">
			<el-row style="margin: 20px 5px;margin-top: 0px;padding: 20px 20px;border: 1px solid #dcdfe6;">
				<el-row :gutter="20">
					<el-col :span="3">
						<div class="grid-content grids" style="background: #409EFF;">
							<div class="font26">{{statMapdata.c1}}</div>
							<div class="font14">已录入</div>
						</div>
					</el-col>
					<el-col :span="3">
						<div class="grid-content grids" style="background: #67C23A;">
							<div class="font26">{{statMapdata.c2}}</div>
							<div class="font14">已签订</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content grids" style="background: #E6A23C;">
							<div class="font26">{{statMapdata.c3}}</div>
							<div class="font14">生效中</div>
						</div>
					</el-col>
					<el-col :span="2">
						<div class="grid-content grids" style="background: #F56C6C;">
							<div class="font26">{{statMapdata.c8}}</div>
							<div class="font14">已过期</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="grid-content grids" style="background: #F56C6C;">
							<table style="width: 100%;text-align: center;border: 1px solid rgba(255, 255, 255, 0.1);">
								<tr>
									<td rowspan="2" style="border-right: 1px solid rgba(255, 255, 255, 0.1);">
										<div class="font26">{{statMapdata.c4}}</div>
										<div class="font14 martop">将过期</div>
									</td>
									<td style="border-bottom: 1px solid rgba(255, 255, 255, 0.1);">
										<div class="font14 martop">
											<div>{{statMapdata.c6}}</div>
											<div style="margin-left: 6px;">已读</div>
										</div>
									</td>
								</tr>
								<tr>
									<td>
										<div class="font14 martop">
											<div>{{statMapdata.c5}}</div>
											<div style="margin-left: 6px;">未读</div>
										</div>
									</td>
								</tr>
							</table>
						</div>
					</el-col>
					<el-col :span="3">
						<div class="grid-content grids" style="background: #909399;">
							<div class="font26">{{statMapdata.c7}}</div>
							<div class="font14">全部</div>
						</div>
					</el-col>
				</el-row>

			</el-row>
			<el-container>
				<el-aside width="200px"><iframe style="height: 99%;" :src="lefturl" frameborder="0"></iframe></el-aside>
				<el-main>
					<iframe :src="iframeurl" frameborder="0"></iframe>
				</el-main>
			</el-container>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: '#app',
			data() {
				return {
					statMapdata:{},
					lefturl:"/admin/html/module/sichuangwuye/hetong/leftTree.html?v="+guid(),
					iframeurl: ""
				}
			},
			created(){
				this.getTopData();
			},
			methods: {
				async getTopData(){
					const res = await postWebCustom(getTableId("791"),{});
					this.statMapdata = res.data;
				},
				setUrl(url) {
					this.iframeurl = url;
				}
			}
		})
	</script>

</html>
